<template>
    <view class="main-container">
        <view class="image-container">
            易购商城
        </view>
        <view class="text-container margin-top-120">
            <text>手机号</text>
        </view>
        <view class="input-container" style="position: relative;">  
            <input  
                class="input-box"  
                type="text"  
                placeholder="请输入手机号"  
                v-model="phone"
            />  
        </view>  
        <view class="text-container margin-top-50">
            <text>密码</text>
        </view>
        <view class="input-container">  
            <input  
                class="input-box"
                type="password"  
                placeholder="请输入密码"  
                v-model="password"  
            />  
        </view>
        <view class="text-container margin-top-50">
            <text>确认密码</text>
        </view>
        <view class="input-container">  
            <input  
                class="input-box"
                type="password"  
                placeholder="请再次输入密码"  
                v-model="confirmPassword"  
            />  
        </view>
        <view class="text-container margin-top-50">
            <text>昵称</text>
        </view>
        <view class="input-container">
            <input
                class="input-box"
                type="text"
                placeholder="请输入昵称"
                v-model="nickname"
            />
        </view>
        <button class="button-box" @tap="register">注册</button>
        <view class="footer-text">
            <button class="unstyled-button" @tap="toLogin">已有账号？点此登录</button>
        </view>
    </view>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'RegisterPage',
    setup() {
        const phone = ref('')
        const password = ref('')
        const confirmPassword = ref('')
        const nickname = ref('')
        const errorMessage = ref('')

        const validatePhone = () => {
            const phoneRegex = /^1[34578]\d{9}$/
            if (!phone.value) {
                errorMessage.value = '手机号不能为空'
                return false
            }
            
            if (!phoneRegex.test(phone.value)) {
                errorMessage.value = '手机号格式不正确'
                return false
            }
            errorMessage.value = ''
            return true
        }

        const validatePassword = () => {
            if (!password.value) {
                errorMessage.value = '密码不能为空'
                return false
            }
            
            if (password.value.length < 6) {
                errorMessage.value = '密码至少需要6位'
                return false
            }
            
            if (password.value.length > 14) {
                errorMessage.value = '密码最多14位'
                return false
            }
            
            errorMessage.value = ''
            return true
        }

        const validateConfirmPassword = () => {
            if (!confirmPassword.value) {
                errorMessage.value = '请确认密码'
                return false
            }
            
            if (confirmPassword.value !== password.value) {
                errorMessage.value = '两次输入的密码不一致'
                return false
            }
            
            errorMessage.value = ''
            return true
        }

        const validateNickname = () => {
            if (!nickname.value) {
                errorMessage.value = '昵称不能为空'
                return false
            }
            if (nickname.value.length < 2) {
                errorMessage.value = '昵称至少需要2个字符'
                return false
            }
            if (nickname.value.length > 10) {
                errorMessage.value = '昵称最多10个字符'
                return false
            }
            errorMessage.value = ''
            return true
        }

        const register = () => {
            if (!validatePhone()) {
                return uni.showToast({
                    title: errorMessage.value,
                    icon: 'none'
                })
            }
            
            if (!validatePassword()) {
                return uni.showToast({
                    title: errorMessage.value,
                    icon: 'none'
                })
            }

            if (!validateConfirmPassword()) {
                return uni.showToast({
                    title: errorMessage.value,
                    icon: 'none'
                })
            }

            if (!validateNickname()) {
                return uni.showToast({
                    title: errorMessage.value,
                    icon: 'none'
                })
            }

            const userList = uni.getStorageSync('userList') || []
            
            // 检查手机号是否已注册
            if (userList.some(item => item.phone === phone.value)) {
                return uni.showToast({
                    title: '该手机号已注册',
                    icon: 'none'
                })
            }

            // 生成用户ID
            const uid = Date.now().toString()
            
            // 创建新用户
            const newUser = {
                uid,
                phone: phone.value,
                password: password.value,
                nickname: nickname.value,
                avatar: '/static/head.jpg',
                balance: '0.00'
            }

            // 保存用户信息
            userList.push(newUser)
            uni.setStorageSync('userList', userList)

            uni.showToast({
                title: '注册成功',
                icon: 'success'
            })

            setTimeout(() => {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }, 1500)
        }

        const toLogin = () => {
            uni.navigateTo({
                url: '/pages/login/login'
            })
        }

        return {
            phone,
            password,
            confirmPassword,
            nickname,
            errorMessage,
            register,
            toLogin
        }
    }
})
</script>

<style scoped>
page {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.image-container {
    margin-top: 140rpx;
    font-size: 60rpx;
    font-weight: bold;
    text-align: center;
}

.input-container {
    margin-top: 6rpx;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    width: 600rpx;
    height: 110rpx;
    border-radius: 20rpx;
}

.input-box {
    background-color: #f8f8f8;
    border: none;
    width: 100%;
    height: 100%;
    padding: 0 30rpx;
    font-size: 32rpx;
}

.input-box::-webkit-input-placeholder {
    color: #888888;
}

.input-box:-moz-placeholder {
    color: #888888;
}

.input-box::-moz-placeholder {
    color: #888888;
}

.input-box:-ms-input-placeholder {
    color: #888888;
}

.button-box {
    background-color: #fd2d3e;
    width: 600rpx;
    height: 110rpx;
    border-radius: 20rpx;
    line-height: 110rpx;
    font-size: 48rpx;
    color: #fff;
    margin-top: 80rpx;
}

.button-box::after {
    border: none;
}

.unstyled-button {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-size: 26rpx;
    line-height: normal;
    color: #808080;
}

.unstyled-button::after {
    border: none;
}

.margin-top-50 {
    margin-top: 50rpx;
}

.margin-top-120 {
    margin-top: 120rpx;
}

.text-container {
    width: 600rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 34rpx;
}

.footer-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 600rpx;
    margin-top: 60rpx;
}

.error-border {
    border: 1px solid #ff0000;
}

.error-text {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    position: absolute;
    bottom: -40rpx;
    left: 20rpx;
}
</style>